﻿@{
    Layout = "~/Areas/Admin/Views/Shared/BlogGl.cshtml";
    ViewBag.Title = "博客标签管理";
}
<div style="padding: 15px 20px;">
    <div class="layui-elem-quote">
        <p>@ViewBag.Title</p>
    </div>
    <div>
        <div>
            <input type="text" id="soulable" placeholder="标签名称" autocomplete="off" class="layui-input" style="width:15%;float:left;">
            <button class="layui-btn layui-btn-lg" onclick="sousuoblog()" style="margin-left:20px;">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
            <button class="layui-btn layui-btn-lg" onclick="add('添加标签')">
                <i class="layui-icon">&#xe608;</i> 添加
            </button>
        </div>
    </div>
    <script type="text/html" id="indexTpl">
        {{d.LAY_TABLE_INDEX+1}}
    </script>
    <table id="demo" lay-filter="tools"></table>
    <div id="laypage"></div>
    <script type="text/html" id="barDemo">
        @*<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>*@
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<form class="layui-form" style="padding-top:20px;display:none;" method="post" action="/Blog/addblogartcle" name="formarticle" id="formarticle">
    <div class="layui-form-item">
        <label class="layui-form-label">标签名称</label>
        <div class="layui-input-block">
            <input type="text" name="BlogLableName" id="BlogLableName" style="width:30%;" lay-verify="required" placeholder="请输入标签名称" autocomplete="off" class="layui-input" />
            <input type="text" name="BlogLableBh" id="BlogLableBh" style="width:30%;display:none;" required class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签点击量</label>
        <div class="layui-input-block">
            <input type="text" style="width:30%;" id="BlogLableClicks" value="0" placeholder="点击量" disabled class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序值</label>
        <div class="layui-input-block">
            <input type="text" name="BlogLableSortValue" id="BlogLableSortValue" style="width:10%;float:left" required lay-verify="required|number" value="0" placeholder="排序值" autocomplete="off" class="layui-input">
            <label class="layui-form-label" style="text-align:center">是否置顶</label>
            <input type="checkbox" lay-filter="sw" lay-skin="switch" lay-text="是|否">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="BlogLableNote" id="BlogLableNote" placeholder="备注" style="width:30%;" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="position:absolute;bottom:10px;">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    $(function () {
        getpagecount({});

    })
    function sousuoblog() {
        getpagecount(
            {
                soulable: $("#soulable").val()
            }
            );
    }
    function getpagecount(data) {
        layui.use(['table', 'laypage'], function () {
            var table = layui.table,
                laypage = layui.laypage;;
            //第一个实例
            var tableindex = table.render({
                elem: '#demo'
                 , height: 700
                 , url: '/BlogLable/lablepage' //数据接口
                 , where: data
                 , page: {
                     groups: 10,
                     limit: 20,
                     limits: [20, 50],
                     layout: ['first', 'prev', 'page', 'next', 'last', 'limit', 'count', 'skip']
                 }
                 , even: true
                 , cols: [[ //表头
                     { templet: '#indexTpl', title: '序号', width: 60, fixed: 'center' }
                   , { field: 'BlogLableBh', title: '标签编号', width: 120, sort: true, fixed: 'left' }
                   , { field: 'BlogLableName', title: '标签名称', width: 150 }
                   , { field: 'BlogLableSortValue', title: '排序值', width: 110, sort: true }
                    , { field: 'BlogLableClicks', title: '标签点击量', width: 110, sort: true }
                   , { field: 'BlogLableCreateTime', title: '创建时间', width: 180, sort: true }
                   , { field: 'BlogLableNote', title: '备注', width: 200 }
                   , { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
                 ]]
                , done: function (res, curr, count) {
                    ////如果是异步请求数据方式，res即为你接口返回的信息。
                    ////如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    //console.log(res);
                    ////得到当前页码
                    //console.log(curr);
                    ////得到数据总量
                    //console.log(count);
                    //var tables = $("#demo").next().find(".layui-table-box");
                    //tables.find("[data-field='BlogArticleBody']").css("display", "none");
                }
            });
            table.on('tool(tools)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if (layEvent === 'del') { //删除
                    layer.confirm('真的删除么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.post("/BlogLable/bloglabledel", {
                            BlogLableBh: data.BlogLableBh,
                        }, function (data, stauts) {
                            if (JSON.parse(data).StateCode == 200)
                                sousuoblog();
                            else
                                console.log(data);
                        });
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    add('修改文章', data);
                }
            });
        });
    }
    function add(_title, data) {
        var state = 0;//0代表添加
        if (data != undefined) {
            console.log(data);
            document.getElementById('BlogLableName').value = data.BlogLableName;
            document.getElementById('BlogLableSortValue').value = data.BlogLableSortValue;
            document.getElementById('BlogLableNote').value = data.BlogLableNote;
            document.getElementById('BlogLableBh').value = data.BlogLableBh;
            document.getElementById('BlogLableClicks').value = data.BlogLableClicks;
            state = 1;//0代表修改
            //获取文章标签
        } else
            $('#formarticle')[0].reset();
        layui.use('form', function () {
            var form = layui.form;
            var openindex = layer.open({
                type: 1,
                title: _title,
                shadeClose: true,
                area: ['90%', '90%'],
                content: $('#formarticle'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                success: function (layero, index) {
                    sessionStorage.BlogLableSortValue = $('#BlogLableSortValue').val();
                    form.on('switch(sw)', function (data) {
                        console.log(data.elem.checked);
                        if (data.elem.checked) {
                            $.get("/BlogLable/bolglablesortmax", function (data, stauts) {
                                $('#BlogLableSortValue').val(data * 1 + 1);
                            });
                        } else {
                            // console.log(sort)
                            $('#BlogLableSortValue').val(sessionStorage.BlogLableSortValue);
                        }
                    });
                    form.on('submit(formDemo)', function (data) {
                        // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                        //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                        data.field.state = state;
                        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                        $.post("/BlogLable/addbloglable", data.field, function (data, status) {
                            console.log(data);
                            layer.close(openindex);
                            sousuoblog();//重新渲染
                            if (JSON.parse(data).StateCode == 200) {
                                layer.msg(JSON.parse(data).Messages);
                            }
                            else {
                                layer.open({
                                    title: '提示'
                                  , content: JSON.parse(data).Messages
                                });
                            }
                        })
                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                },
                end: function () {
                    $('#formarticle').hide();
                }
            });
        });
    }
</script>